import React, { Component, Suspense } from 'react'
import { Switch } from 'react-router-dom'
import { Route,Link } from 'react-router-dom'
// import Home from './pages/Home'
// import About from './pages/About'
const Home = React.lazy(()=> import ('./pages/Home'))
const About = React.lazy(()=> import ('./pages/About'))
export default class App extends Component {
  render() {
    return (
      <div>
        <div className='row'>
          <div className='col-xs-offset-2 col-xs-8'>
            <div className='page-header'>
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className='row'>
          <div className='col-xs-2 col-xs-offset-2'>
            <div className='list-group'>
              <Link className='list-group-item' to='/about'>
                About
              </Link>
              <Link className='list-group-item' to='/home'>
                Home
              </Link>
            </div>
          </div>
          <div className='col-xs-6'>
            <div className='panel'>
              <div className='panel-body'>
                <Suspense fallback={<h3>正在加载，请稍等...</h3>}>
                  <Switch>
                    <Route path="/home" component={Home}></Route>
                    <Route path="/about" component={About}></Route>
                  </Switch>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
